<div id="presentacion">
    <h1>Listado de Pasajeros</h1>
    <!--
    Prueba de carga de datos con ajax y json
    -->
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script>
     
               function recuperarAlumnos(page)
           {
               try
               {                 
                    var apellido = document.getElementById("apellido").value;
                    var documento = document.getElementById("documento").value;
                    
                    var data;
                    if(document.getElementById("todos").checked){
                        data = "todos=1";
                    }
                    else
                    {
                        data = "todos=0";
                    }
                   
                    data = data + "&documento="+documento+"&apellido="+apellido 
                            + "&limite=" + document.getElementById("mostrar").value 
                            + "&pagina=" + page;
                    
                   $.ajax(
                       {
                           // puede ser "get" y "post"
                           type: "post",
                           // el módulo que hará la búsqueda
                           url: "<?php echo base_url() . 'ccliente/buscarAjax';?>",
                           // los datos para la consulta
                           data: data,
                           // este no viaja al servidor
                           //context : { "cedula" : cedula },
                           // que hacer si esto falla
                           error: callback_error,
                           // que hacer si funciona 
                           success: recuperarClientes
                       });
               }
               catch(ex)
               {
                   alert(ex.description);
               }
           }
           
           function callback_error(XMLHttpRequest, textStatus, errorThrown)
            {
                // en ambientes serios esto debe manejarse con mucho cuidado, 
                // aquí optamos por una solución simple
                alert(errorThrown);
            }
            
            
            function procesarRespuesta(ajaxResponse)
            { 
                // observa que aquí asumimos que el resultado es un objeto 
                // serializado en JSON, razón por la cual tomamos este dato
                // y lo procesamos para recuperar un objeto que podamos
                // manejar fácilmente
                if (typeof ajaxResponse == "string")
                    ajaxResponse = $.parseJSON(ajaxResponse);
                return ajaxResponse;
            }
            
            function recuperarClientes(ajaxResponse, textStatus)
            {
                var alumnos = procesarRespuesta(ajaxResponse);
                if (!alumnos)
                {
                    // no se encontraron registros :(
                    return;
                }

                // recupera la instancia de la tabla en donde colocaremos los 
                // registros que recuperamos y elimina todos salvo el primero, 
                // que es donde se encuentra el encabezado de la tabla
                var tabla = document.getElementById('clientes');
               while(tabla.hasChildNodes())
               tabla.removeChild(tabla.firstChild);	
        

                // ahora, para cada registro que recuperamos
                var alumno;
                
                var fila;
                var columna;
                var img;
                var a;
                for (var idx in alumnos)
                {
                    fila = document.createElement("tr");
                    alumno = alumnos[idx];
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.id));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.apellido));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.domicilio));
                    fila.appendChild(columna);
                    
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.provincia));
                    fila.appendChild(columna);
                    
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.email));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.telefono));
                    fila.appendChild(columna);
                    
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.anios));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.auto));
                    fila.appendChild(columna);
                   
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.saldo_favor));
                    fila.appendChild(columna);
                    
                    columna= document.createElement("td");
                    a=document.createElement("a");
                    a.setAttribute("href","<?php echo base_url() . 'ccliente/modificar/';?>" + alumno.id);
                    img = document.createElement("img");
                    img.setAttribute("src","<?php echo base_im(); ?>edit.png");
                    a.appendChild(img);
                    
                    columna.appendChild(a);  
                    
                   
                     a=document.createElement("a");
                    a.setAttribute("href","<?php echo base_url() . 'ccliente/eliminar/';?>" + alumno.id);
                     img = document.createElement("img");
                    img.setAttribute("src","<?php echo base_im(); ?>delete.png");
                    a.appendChild(img);
                    
                    columna.appendChild(a);  
                    
                    fila.appendChild(columna);              
                    
                
                    tabla.appendChild(fila);                  
                }
                
          }
          
          
          function cargarBusqueda(page)
          {
              recuperarAlumnos(page);
              paginar_ajax();
          }
     </script> 
    
    <script>
     
               function paginar_ajax()
           {
               try
               {                 
                    var apellido = document.getElementById("apellido").value;
                    var documento = document.getElementById("documento").value;
                    var data;
                    if(document.getElementById("todos").checked){
                        data = "todos=1";
                    }
                    else
                    {
                        data = "todos=0";
                    }
                   
                    data = data + "&documento="+documento+"&apellido="+apellido 
                            + "&limite=" + document.getElementById("mostrar").value;
                    
                   $.ajax(
                       {
                           // puede ser "get" y "post"
                           type: "post",
                           // el módulo que hará la búsqueda
                           url: "<?php echo base_url() . 'ccliente/cantClientes';?>",
                           // los datos para la consulta
                           data: data,
                           // este no viaja al servidor
                           //context : { "cedula" : cedula },
                           // que hacer si esto falla
                          // error: callback_error,
                           // que hacer si funciona 
                           success: paginas
                       });
               }
               catch(ex)
               {
                   alert(ex.description);
               }
           }
           
//           function callback_error(XMLHttpRequest, textStatus, errorThrown)
//            {
//                // en ambientes serios esto debe manejarse con mucho cuidado, 
//                // aquí optamos por una solución simple
//                alert(errorThrown);
//            }
            
            
//            function procesarRespuesta(ajaxResponse)
//            { 
//                // observa que aquí asumimos que el resultado es un objeto 
//                // serializado en JSON, razón por la cual tomamos este dato
//                // y lo procesamos para recuperar un objeto que podamos
//                // manejar fácilmente
//                if (typeof ajaxResponse == "string")
//                    ajaxResponse = $.parseJSON(ajaxResponse);
//                return ajaxResponse;
//            }
            
            function paginas(ajaxResponse, textStatus)
            {
                var alumnos = ajaxResponse;
//                if (!alumnos)
//                {
//                    // no se encontraron registros :(
//                    return;
//                }

                // recupera la instancia de la tabla en donde colocaremos los 
                // registros que recuperamos y elimina todos salvo el primero, 
                // que es donde se encuentra el encabezado de la tabla
                var pag = document.getElementById('paginas');
                var cant_mostrar = document.getElementById('mostrar').value;
                var cant_pag =  parseInt(alumnos / cant_mostrar);
               while(pag.hasChildNodes())
               pag.removeChild(pag.firstChild);	
        
               var a;
               
               for(var i=1;i<=cant_pag;i++)
               {
                    a = document.createElement('a');
                  if(i===1)
                  {
                      a.setAttribute('class','pagActual');
                      a.setAttribute('onclick','');
                  }
                  else
                  {
                      a.setAttribute('class','pag');
                      a.setAttribute('onclick','cargarPagina(this)');
                  }         
                  
                  a.setAttribute('href','#');
                  a.setAttribute('value',i);
                  a.appendChild(document.createTextNode(i));
                    
                   
                   pag.appendChild(a);
               }

              
          }
          
          function cargarPagina(enlace)
          {
              var padre = document.getElementById('paginas');
              var hijos = padre.getElementsByTagName('a');
              for(var j = 0; j< hijos.length;j++)
               {
                   hijos[j].setAttribute('onclick','cargarPagina(this)');
                   hijos[j].setAttribute('class','pag');
               } 
              enlace.setAttribute('class','pagActual');
              enlace.setAttribute('onclick','');
                            
              var temp = enlace.getAttribute('value');
              recuperarAlumnos(temp);
          }
                
     </script> 
    
    
      <!--
    FIN- Prueba de carga de datos con ajax y json
    -->
    <div>
   
    	<p>
                <label for="apellido">Apellido: </label>
                <input id="apellido" name="apellido"  class="ui-widget-content"> 
                <label for="documento">Documento: </label>
                <input id="documento" name="documento"  class="ui-widget-content">                
                <input type="checkbox" name="todos" id="todos" >Todos
                
                                <label for="mostrar">Mostrar: </label>
            <select id="mostrar">
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="50">50</option>             
            </select>
        </p>
        <p>
            <button type="submit" value="Buscar" onclick="cargarBusqueda(1)">Buscar</button>
        </p>
   
        </div>

    <div class="ui-datagrid">
        <input type="submit" value="Alta Pasajero" 
    onclick="window.location='<?php echo base_url() . 'ccliente/nuevo'?>';" />
    <table border="1">
        <thead><tr>
            <th>ID</th>
            <th>APELLIDO</th>
            <th>DOMICILIO</th>
            <th>PROVINCIA</th>
            <th>EMAIL</th>
            <th>TELEFONO</th>
            <th>EDAD</th>
            <th>AUTO</th>
            <th>SALDO FAVOR</th>
            <th>ACCION</th>
        </tr></thead>
        <tbody id="clientes">
    <?php foreach ($listas as $fila)        
    {
        ?>
        <tr>
            <td><?php echo $fila->id?></td>
            <td><?php echo $fila->apellido?></td>
            <td><?php echo $fila->domicilio?></td>
            <td><?php echo $fila->provincia?></td>
            <td><?php echo $fila->email?></td>
            <td><?php echo $fila->telefono?></td>
            <td><?php echo $fila->anios?> <?php echo " años"?></td>
            <td><?php echo $fila->auto?></td>
            <td>$ <?php echo $fila->saldo_favor;?> (<?php echo $fila->fecha_vto;?>)</td>
            <td>
                <a href="<?php echo base_url() . 'ccliente/modificar/' . $fila->id;?>"><img src="<?php echo base_im(); ?>edit.png"  /></a>
                <a href="<?php echo base_url() . 'ccliente/eliminar/' . $fila->id;?>"><img src="<?php echo base_im(); ?>delete.png"  /></a></td>
        </tr>       
        <?php
    }
    ?>
        </tbody></table>

    </div>
</div>

 <p>
     <button type="submit" value="Buscar" onclick="cargarPagina(t)" >Buscar cantidad</button>
        </p>
<p id="paginas" style="text-align: center">
    
</p>

           
    

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_js(); ?>jquery-ui-git.css">

